<template>
    <div class="shopping-cart">
        <div class="main">
            <div class="header">
                <van-nav-bar>
                    <template #left>
                        <span class="page-title">购物车</span>
                    </template>
                    <template #right>
                        <span class="page-sub-title">管理</span>
                    </template>
                </van-nav-bar>
            </div>
            <div class="body">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <van-swipe-cell v-for="i in 100" :key="i" class="item">
                        <div class="card">
                            <div class="checkbox-wrapper">
                                <van-checkbox v-model="checked" icon-size="18px"></van-checkbox>
                            </div>
                            <div class="card-thumb">
                                <img v-lazy="'https://img.yzcdn.cn/vant/cat.jpeg'"></img>
                            </div>
                            <div class="card-content">
                                <div>
                                    <div class="card-title">
                                        商品标题
                                    </div>
                                    <div class="card-sku" @click.stop="changeSku">
                                        <span>新款无色代码</span>
                                        <van-icon name="arrow-down" size="10" color="#666666" class="arrow-down-icon"/>
                                    </div>
                                    <div class="card-tag">
                                        <span> 陶工厂</span>
                                    </div>
                                </div>
                                <div class="card-bottom">
                                    <div class="card-price">
                                        <div>
                                            <span class="card-price-currency">￥</span>
                                            <span class="card-price-integer">2</span>
                                            <span> .</span>
                                            <span class="card-price-decimal">00</span>
                                        </div>
                                        <div class="card-origin-price">
                                            ￥10.00
                                        </div>
                                    </div>
                                    <div class="num-wrapper">
                                        <span class="num-tag" v-if="!show" @click.stop="show=true">x{{num}}</span>
                                        <div class="stepper-wrapper" v-else>
                                            <van-stepper v-model.number="num" theme="round" button-size="22"
                                                         disable-input/>
                                            <van-icon name="clear" color="#ee0a24" size="24" class="clear-icon"
                                                      @click.stop="show=false"/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <template #right>
                            <van-button square type="danger" text="删除" class="cell-button"/>
                            <van-button square type="primary" text="收藏" class="cell-button"/>
                        </template>
                    </van-swipe-cell>
                </van-list>
            </div>
            <div class="footer">
                <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
                    <van-checkbox v-model="checked">全选</van-checkbox>
                    <template #tip>
                        你的收货地址不支持同城送, <span class="change-btn" @click.stop="onClickEditAddress">修改地址</span>
                    </template>
                </van-submit-bar>
            </div>
        </div>
        <van-sku
                v-model="show"
                :sku="sku"
                :goods="goods"
                :goods-id="goodsId"
                :quota="quota"
                :quota-used="quotaUsed"
                :hide-stock="sku.hide_stock"
                :message-config="messageConfig"
        >
            <!-- 自定义 sku actions -->
            <template #sku-actions="props">
                <div class="van-sku-actions">
                    <van-button square size="large" type="warning" @click="onBuyClicked">
                        积分兑换
                    </van-button>
                    <!-- 直接触发 sku 内部事件，通过内部事件执行 onBuyClicked 回调 -->
                    <van-button
                            square
                            size="large"
                            type="danger"
                            @click="onAddCartClicked"
                    >
                        买买买
                    </van-button>
                </div>
            </template>
        </van-sku>
    </div>
</template>

<script>
    export default {
        name: "active",
        data() {
            return {
                num: 1,
                loading: false,
                finished: true,
                checked: false,
                goodsId: '',
                quota: 11,
                quotaUsed: 11,
                show: false,
                sku: {

                    tree: [
                        {
                            k: '颜色', // skuKeyName：规格类目名称
                            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                            v: [
                                {
                                    id: '1', // skuValueId：规格值 id
                                    name: '红色', // skuValueName：规格值名称
                                    imgUrl: 'https://img.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                                    previewImgUrl: 'https://img.yzcdn.cn/1p.jpg', // 用于预览显示的规格类目图片
                                },
                                {
                                    id: '1',
                                    name: '蓝色',
                                    imgUrl: 'https://img.yzcdn.cn/2.jpg',
                                    previewImgUrl: 'https://img.yzcdn.cn/2p.jpg',
                                }
                            ],
                            largeImageMode: true, //  是否展示大图模式
                        }
                    ],
                    // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                    list: [
                        {
                            id: 2259, // skuId
                            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                            price: 100, // 价格（单位分）
                            stock_num: 110 // 当前 sku 组合对应的库存
                        }
                    ],
                    price: '1.00', // 默认价格（单位元）
                    stock_num: 227, // 商品总库存
                    collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                    none_sku: false, // 是否无规格商品
                    messages: [
                        {
                            // 商品留言
                            datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                            multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                            name: '留言', // 留言名称
                            type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                            required: '1', // 是否必填 '1' 表示必填
                            placeholder: '' // 可选值，占位文本
                        }
                    ],
                    hide_stock: false // 是否隐藏剩余库存

                    // 数据结构见下方文档
                },
                goods: {
                    // 数据结构见下方文档
                },
                messageConfig: {
                    // 数据结构见下方文档
                },
            }
        },
        methods: {
            changeSku() {
                this.show = true
            },
            openSku() {
                this.show = true
            },
            onBuyClicked() {
            },
            onAddCartClicked() {
            },
            onLoad() {
            },
            onClickEditAddress() {
                this.$router.push({name:'addressList'})
            },
            onSubmit() {
            }
        }
    }
</script>
<style>

</style>
<style scoped lang="scss">
    .shopping-cart {
        flex: 1;
        background-color: #f5f5f5;

        overflow: hidden;
        display: flex;
        flex-direction: column;
        .page-title {
            font-size: 18px;
            font-weight: bold;
            color: #333333;
        }
        .page-sub-title {
            font-size: 14px;
            color: #333333;
        }
        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            transform: scale(1);
            overflow: hidden;
            .body {
                padding: 0 20px;
                padding-bottom: 168px;
                flex: 1;
                overflow: auto;
                .item {
                    margin-top: 24px;
                }
            }

        }

        .card {
            position: relative;
            padding: 20px;
            display: flex;
            align-items: flex-start;
            background-color: #ffffff;
            border-radius: 20px;

            .checkbox-wrapper {
                display: flex;
                height: 140px;
                align-items: center;
            }
            .card-thumb {
                position: relative;
                flex-shrink: 0;
                width: 140px;
                height: 140px;
                margin-right: 10px;
                margin-left: 20px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
            .card-content {
                flex: 1;
                .card-title {
                    font-size: 12px;
                    color: #333333;
                    margin-bottom: 20px;
                }
                .card-sku {
                    font-size: 12px;
                    color: #666666;
                    background-color: #f5f5f5;
                    padding: 4px 6px;
                    margin-bottom: 12px;
                    border-radius: 4px;
                    display: inline-flex;
                    align-items: center;
                    .arrow-down-icon {
                        margin-left: 20px;
                    }
                }
                .card-tag {
                    margin-bottom: 12px;
                    span {
                        font-size: 12px;
                        padding: 4px 6px;
                        background-color: #ff5522;
                        color: #ffffff;
                        display: inline-block;
                        border-radius: 4px;
                    }
                }
                .card-bottom {
                    height: 44px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .card-price {
                        display: flex;
                        align-items: flex-end;
                        color: #ff5522;
                        .card-price-currency {
                            font-size: 12px;
                        }
                        .card-price-integer {
                            font-size: 16px;
                            font-weight: bold;
                        }
                        .card-price-decimal {
                            font-size: 12px;
                        }
                        .card-origin-price {
                            display: inline-block;
                            margin-left: 10px;
                            color: #969799;
                            font-size: 12px;
                            text-decoration: line-through;
                        }
                    }
                    .num-wrapper {
                        display: flex;
                        align-items: center;
                        .num-tag {
                            border: 1px solid #dcdcdc;
                            padding: 6px 8px;
                            border-radius: 8px;
                        }
                        .stepper-wrapper {
                            display: flex;
                            align-items: center;
                            .clear-icon {
                                margin-left: 10px;
                            }
                        }
                    }

                }
            }
        }
        .cell-button {
            height: 100%;
        }
        .change-btn{
            color: #07c160;
        }
    }

</style>
